<template>
  <div class="top-common-box">
    <div class="top-common"
      :class="homeClass">
      <div class="top-common-box-height"></div>
      <div class="top-common-left">
        <img class="logo"
          src="@/assets/image/logo.png"
          alt="" />
        <span class="title">电子地图系统</span>
      </div>
      <div class="top-common-middle">
        <TopMenu></TopMenu>
      </div>
      <div class="top-common-right">
        <div class="top-common-ops">
          <img @click="dealRedirect('system-config')"
            class="ops-icon"
            src="@/assets/image/icon/ops.png" />
        </div>
        <div class="top-common-img">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <img src="@/assets/image/icon/user.png"
                alt="" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">个人中心</el-dropdown-item>
              <el-dropdown-item command="b"
                divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="username">{{ userName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import TopMenu from '@/components/top-menu/index.vue';
  import { getUserInfo } from '@/utils/common.js';

  export default {
    name: 'TopCommon',
    components: {
      TopMenu
    },
    data() {
      return {
        userName: '',
        isHome: true,
        homeClass: 'home-priy'
      };
    },
    mounted() {
      this.userName = getUserInfo().name || '国家级管理员';
    },
    methods: {
      loginOut() {
        setTimeout(() => {
          sessionStorage.clear();
          let { pathname, search } = window.location;
          let formUrl = pathname + search;
          this.$router.push({
            path: '/login',
            query: { formUrl }
          });
        }, 500);
      },
      dealRedirect(url) {
        this.$store.commit('global/setTopActive', false);
        this.$router.push({ path: url });
      },
      handleCommand(command) {
        switch (command) {
          case 'a':
            this.dealRedirect('/user');
            break;
          case 'b':
            this.loginOut();
            break;
          default:
            break;
        }
      }
    }
  };
</script>
<style lang="scss">
  .top-common-box {
    width: 100%;
    .home-hyaline {
      background: linear-gradient(360deg, rgba(0, 22, 30, 0.1) 0%, #001425 100%);
    }
    .home-priy {
      background: $--primary-color;
    }
    .top-common {
      display: flex;
      height: $--head-H;
      .top-common-left {
        height: $--head-H;
        margin-left: 20px;
        display: flex;
        align-items: center;
        color: #fff;
        .logo {
          height: calc($--head-H - 20px);
          border-radius: $--general-radius;
          padding: 2px;
          margin-right: 10px;
        }
        .title {
          font-size: 24px;
        }
      }
      .top-common-middle {
        height: 57px;
        margin: 0 auto;
      }
      .top-common-right {
        height: $--head-H;
        display: flex;
        align-items: center;
        .top-common-ops {
          margin-right: 20px;
          .ops-icon {
            width: 20px;
            height: 20px;
            cursor: pointer;
          }
        }
        .top-common-img {
          margin-right: 10px;
          position: relative;

          img {
            width: 32px;
            height: 32px;
            overflow: hidden;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
        .username {
          color: #fff;
          margin-right: 30px;
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
  }
</style>
